<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="parts/Header.jsp" %>
<%--
    Document   : About Us
    Created on : 16/08/2011, 11:47:35 ص
    Author     : Ahmed
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<html:html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Search CVs</title>

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>




        <style>
            body { font-size: 62.5%; }
            label, input { display:block; }
            input.text { margin-bottom:12px; width:95%; padding: .4em; }
            fieldset { padding:0; border:0; margin-top:25px; }
            h1 { font-size: 1.2em; margin: .6em 0; }
            div#users-contain { width: 350px; margin: 20px 0; }
            div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
            div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
            .ui-dialog .ui-state-error { padding: .3em; }
            .validateTips { border: 1px solid transparent; padding: 0.3em; }
        </style>

        <style type="text/css">
            .js #dd1 {display: none;}
            .js #dd2 {display: none;}
            .js #dd3 {display: none;}
            .js #dd4 {display: none;}
            .js #dd5 {display: none;}
        </style>
        <script type="text/javascript">
            document.documentElement.className = 'js';
        </script>
        <script>
            $(function() {
                $( "#displayData" ).accordion({
                    
                    collapsible: true
                });
            });
        </script>

        <script>
            function hideData(){
                $('#displayData').hide();
            }
        </script>

    </head>
    <body >
        <center>
            <div id="innerPageContainer" >
                <table  cellpadding="0" cellspacing="0" border="0">
                    <tr>

                        <td rowspan="3" id="innerPageCell" >

                            <h3>Please Pick Search Criteria</h3>   
                            <select id="select"  onchange="select();hideData()">
                                <option value="0" >Select Search Criteria</option>
                                <option value="1" >Search By Years of Experience</option>
                                <option value="2">Search By Education Level</option>
                                <option value="3">Search By Study Field</option>
                                <option value="4">Search By Graduation Year</option>
                                <option value="5">Search By Applicant's Applied Vacancy</option>
                            </select>

                            <script type="text/javascript">
                                var select;
                                function setVal(){
                                    document.getElementById('select').innerHTML=select;
                                }
                              
                                function select(){
                                    var select=document.getElementById('select').value;
                                   
                                    if(select ==0)
                                    {
                                        $(document).ready(function() {
                                            // hides the slickbox as soon as the DOM is ready
                                          
                                           
                                            $('#dd1').hide('slow');
                                            $('#dd2').hide('slow');
                                            $('#dd3').hide('slow');
                                            $('#dd4').hide('slow');
                                            $('#dd5').hide('slow');
                                        });
                                    }
                                    if(select ==1)
                                    {
                                        $(document).ready(function() {
                                            // hides the slickbox as soon as the DOM is ready
                                          
                                           
                                            $('#dd1').show('slow');
                                            $('#dd2').hide('slow');
                                            $('#dd3').hide('slow');
                                            $('#dd4').hide('slow');
                                            $('#dd5').hide('slow');
                                        
                                        });
                                    }
                                    if(select ==2)
                                    {
                                        $(document).ready(function() {
                                            // hides the slickbox as soon as the DOM is ready
                                          
                                           
                                            $('#dd2').show('slow');
                                            $('#dd1').hide('slow');
                                            $('#dd3').hide('slow');
                                            $('#dd4').hide('slow');
                                            $('#dd5').hide('slow');
                                        
                                        });
                                    }
                                    if(select ==3)
                                    {
                                        $(document).ready(function() {
                                            // hides the slickbox as soon as the DOM is ready
                                          
                                           
                                            $('#dd3').show('slow');
                                            $('#dd1').hide('slow');
                                            $('#dd2').hide('slow');
                                            $('#dd4').hide('slow');
                                            $('#dd5').hide('slow');
                                        
                                        });
                                    }
                                    if(select ==4)
                                    {
                                        $(document).ready(function() {
                                            // hides the slickbox as soon as the DOM is ready
                                          
                                           
                                            $('#dd4').show('slow');
                                            $('#dd1').hide('slow');
                                            $('#dd2').hide('slow');
                                            $('#dd3').hide('slow');
                                            $('#dd5').hide('slow');
                                        
                                        });
                                    }
                                    if(select ==5)
                                    {
                                        $(document).ready(function() {
                                            // hides the slickbox as soon as the DOM is ready
                                          
                                           
                                            $('#dd5').show('slow');
                                            $('#dd1').hide('slow');
                                            $('#dd2').hide('slow');
                                            $('#dd3').hide('slow');
                                            $('#dd4').hide('slow');
                                        
                                        });
                                    }
                                
                                }
                                
                                
                                $(function() {
                                    $( "#dd1" ).accordion({
                                        heightStyle: "content"
                                    });
                                });
                                $(function() {
                                    $( "#dd2" ).accordion({
                                        heightStyle: "content"
                                    });
                                });
                                $(function() {
                                    $( "#dd3" ).accordion({
                                        heightStyle: "content"
                                    });
                                });
                                $(function() {
                                    $( "#dd4" ).accordion({
                                        heightStyle: "content"
                                    });
                                });
                                $(function() {
                                    $( "#dd5" ).accordion({
                                        heightStyle: "content"
                                    });
                                });
                            </script>






                            <div id="dd1">
                                <h4>Search by Years Of Experience</h4>
                                <div id="d1">


                                    <h3>Please Pick Years Of Experience Desired</h3>
                                    <html:form action="/admin?actionType=searchByYOF">
                                        <html:select onfocus="enterTextBox(this)" onblur="leaveTextBox(this)" styleClass="innerTextBox" property="yearsOfExperince" style="width: 190px">
                                            <html:option value="-1" >Please Select One</html:option>

                                            <c:forEach var="j" begin="0" end="14" step="1">
                                                <html:option value="${j}"> ${j} </html:option>
                                            </c:forEach>

                                            <html:option value="15+">15+</html:option>
                                        </html:select>
                                        <html:submit value="Search"/>
                                    </html:form>

                                </div>
                            </div>

                            <div id="dd2">
                                <h4>Search by Education Level</h4>
                                <div id="d2">

                                    <h3>Please Pick Education Level</h3>
                                    <logic:notEmpty name="AdminBean" property="levels" >
                                        <html:form action="/admin?actionType=searchByEL">
                                            <html:select property="educationLevelId">
                                                <logic:iterate id="el" name="AdminBean" property="levels">

                                                    <html:option value="${el.educationLevelId}">${el.educationLevelName}</html:option>

                                                </logic:iterate>
                                            </html:select>
                                            <html:submit value="Search"/>
                                        </html:form> 

                                    </logic:notEmpty>
                                </div>
                            </div>

                            <div id="dd3">
                                <h4>Search By Study Field</h4>
                                <div id="d3">
                                    <logic:notEmpty name="AdminBean" property="study" >
                                        <html:form action="/admin?actionType=searchBySL">
                                            <html:select property="studyFieldId">
                                                <logic:iterate id="el" name="AdminBean" property="study">

                                                    <html:option value="${el.studyFieldId}">${el.studyFieldName}</html:option>

                                                </logic:iterate>
                                            </html:select>
                                            <html:submit value="Search"/>
                                        </html:form> 

                                    </logic:notEmpty>

                                </div>
                            </div>
                            <div id="dd4">
                                <h4>Search By Graduation Year</h4>
                                <div id="d4">

                                    <html:form action="/admin?actionType=searchByGraduationYear">

                                        <html:select  property="graduationYear" style="width: 190px">


                                            <html:option value="-1">Please Select One</html:option>

                                            <c:forEach var="i" begin="1980" end="2012" step="1">
                                                <html:option value="${i}">${i}</html:option>
                                            </c:forEach>
                                            <html:option value="Other">Other</html:option>
                                        </html:select>
                                        <html:submit value="Search"/>
                                    </html:form>

                                </div>
                            </div>

                            <div id="dd5">
                                <h4>Search By Applicant's Applied Vacancy</h4>
                                <div id="d5">

                                    <html:form action="/admin?actionType=searchByVacancy">

                                        <html:select  property="vacancyId" style="width: 190px">


                                            <html:option value="-1">Please Select One</html:option>
                                            <logic:iterate id="v" name="AdminBean" property="vac">
                                                <html:option value="${v.vacancyId}">${v.vacancyTitle}</html:option>
                                            </logic:iterate>

                                        </html:select>
                                        <html:submit value="Search"/>
                                    </html:form>

                                </div>
                            </div>


                            <logic:notEmpty name="AdminBean" property="applicants" >

                                <div id="displayData">
                                    <logic:iterate id="app" name="AdminBean" property="applicants">    


                                        <h3>${app.firstName}&nbsp;  ${app.middleName}&nbsp;${app.lastName}</h3>
                                        <div>

                                            <font color="blue"><b>applicant-Id:</b></font>&nbsp;${app.applicantId}<br/>
                                            <font color="blue"><b>applied Vacancy:</b></font>&nbsp;${app.vacancies.vacancyTitle}<br/>
                                            <font color="blue"><b>Study Field:</b></font>&nbsp;${app.studyFields.studyFieldName}<br/>
                                            <font color="blue"><b>Education Level:</b></font>&nbsp; ${app.educationLevels.educationLevelName}<br/>
                                            <font color="blue"><b>University/Institute:</b></font>&nbsp;${app.institutes.instituteName}<br/>

                                            <font color="blue"><b>Place OF Birth:</b></font>&nbsp;<logic:iterate id="c" name="AdminBean" property="countries">             
                                                <logic:equal name="c" value="${app.placeOfBirth}" property="countryId">
                                                    ${c.countryName}
                                                </logic:equal>
                                            </logic:iterate>
                                            <br/>
                                            <font color="blue"><b>Military Status:</b></font>&nbsp;${app.militaryStatus}<br/>
                                            <font color="blue"><b>Marital Status:</b></font>&nbsp;${app.maritalyStatus}<br/>
                                            <font color="blue"><b>Number of children:</b></font>&nbsp;${app.noOfChildren}<br/>
                                            <font color="blue"><b>City:</b></font>&nbsp;${app.city}<br/>

                                            <font color="blue"><b>Grade:</b></font>&nbsp;
                                            <logic:iterate id="c" name="AdminBean" property="grades">             
                                                <logic:equal name="c" value="${app.gradeId}" property="gradeId">
                                                    ${c.gradeName}
                                                </logic:equal>
                                            </logic:iterate>
                                            <br/>

                                            <font color="blue"><b>Years Of Experience:</b></font>&nbsp; ${app. yearsOfExperince}<br/>

                                            <font color="blue"><b>applicant-CV:</b></font>&nbsp;<a href="${app.cv}" target="_blank">Download</a><br/>

                                            <font color="blue"><b>Date of birth:</b></font>&nbsp;${app.dateOfBirth}<br/>

                                            <font color="blue"><b>Gender:</b></font>&nbsp;${app.gender}<br/>
                                            <font color="blue"><b>applicant-National Id:</b></font>&nbsp;${app.nationalId}<br/>
                                            <font color="blue"><b>Applying Date:</b></font>&nbsp;${app.date}<br/>
                                            <font color="blue"><b>Graduation Year:</b></font>&nbsp;${app.graduationYear}<br/>
                                            <font color="blue"><b>Country:</b></font>&nbsp;${app.country}<br/>
                                            <font color="blue"><b>address:</b></font>&nbsp;${app.address}<br/>
                                            <font color="blue"><b>Zip-Code:</b></font>&nbsp;${app.zipcode}<br/>
                                            <font color="blue"><b>applicant-phone:</b></font>&nbsp;${app.phone}<br/>
                                            <font color="blue"><b>applicant-Mobile:</b></font>&nbsp;${app.mobile}<br/>
                                            <font color="blue"> <b>applicant- Companies:</b></font>&nbsp;

                                            <div id="users-contain" class="ui-widget">
                                                <h1>Users' Companies:</h1>
                                                <table  id="users" class="ui-widget ui-widget-content">


                                                    <thead>
                                                        <tr class="ui-widget-header ">
                                                            <th>Company name</th>
                                                            <th>Position</th>
                                                            <th>from</th>
                                                            <th>To</th>
                                                        </tr>
                                                    </thead>
                                                    <logic:iterate id="company" name="AdminBean" property="applicantCompanies">  
                                                        <logic:equal name="app" value="${company.applicantId}" property="applicantId">
                                                            <tbody>
                                                                <tr>
                                                                    <td>${company.companyName}</td>
                                                                    <td>${company.applicantPosition}</td>
                                                                    <td>${company.workFrom}</td>
                                                                    <td>${company.workTo}</td>
                                                                </tr>
                                                            </tbody>

                                                        </logic:equal>

                                                    </logic:iterate> 

                                                </table>
                                            </div>


                                        </div>



                                    </logic:iterate>
                                </div>




                            </logic:notEmpty>

                            <logic:empty name="AdminBean" property="applicants" >
                                <br/><br/>
                                <div id="i">
                                    <center><font color="green"><b>no data to display</b></font></center>
                                </div>
                            </logic:empty>



                    </tr>

                    <tr>

                    </tr>

                    <tr>

                    </tr>

                    <tr>
                        <td colspan="2" class="footer">
                            <jsp:include page="parts/Footer.jsp"/>
                        </td>
                    </tr>
                </table>

            </div>
        </center>
    </body>
</html:html>

